<template>
  <div class="Home">
  	<!-- 顶部导航  -->
    <head_1></head_1>
    
    <!-- 轮播图  -->
    <div class="home_swp">
    	<swiper :swiplist="swiperdata"></swiper>
    </div>
    
    <!-- 免抢购  -->
    <div class="home_rush clear">
    	<p class="home_til">免抢购</p>
    	<!-- 跳转到对应单品 -->
    	<router-link tag="div" to="/Home" class="rush_con" v-for="x in rushdata">
    		<p class="home_txt">{{x.r_name}}</p>
    		<div class="time_cost">
    			<div class="home_time">
    				<span>{{x.r_hour}}</span>:<span>{{x.r_min}}</span>:<span>{{x.r_sec}}</span>
    			</div>
    			<span class="home_cost">￥{{x.r_cost}}</span>
    			<img :src="x.r_src"/>
    		</div>
    	</router-link>
    </div>
    
    <!-- 菜品精选 -->
    <div class="home_great clear">
    	<!-- 跳转到菜品列表 -->
    	<p class="home_til clear">菜品精选<router-link tag="span" class="home_txt fr" to="/Home">查看更多</router-link></p>
    	<router-link tag="div" to="/Home" class="great_rig">
    		<img src="../../../static/contentImg/home_choiceness_01.png"/>
    	</router-link>
    	<div class="great_left">
    		<router-link tag="div" to="/Home" v-for="x in greatdata">
    			<img :src="x.g_src"/>
    		</router-link>
    	</div>
    </div>
  </div>
</template>

<script>
import head_1 from '../Head/head_1.vue'
import swiper from '../Swiper/swiper.vue'
export default {
  name: 'Home',
  data () {
    return {
      swiperdata:[{iswip_src:'../../../static/contentImg/home_breakfast.png'},{iswip_src:'../../../static/contentImg/home_breakfast.png'},{iswip_src:'../../../static/contentImg/home_breakfast.png'}],
      
      rushdata:[{r_name:'精选延庆生态胡萝卜600g',r_hour:'01',r_min:'36',r_sec:'56',r_cost:'4.20',r_src:'../../../static/contentImg/home_purchase_left.png'},
      {r_name:'精选延庆生态黄瓜500g',r_hour:'01',r_min:'45',r_sec:'20',r_cost:'9.90',r_src:'../../../static/contentImg/home_purchase_right.png'}],
      
      greatdata:[{g_src:'../../../static/contentImg/home_choiceness_02.png'},{g_src:'../../../static/contentImg/home_choiceness_03.png'},{g_src:'../../../static/contentImg/home_choiceness_04.png'}]
    }
  },
  components:{head_1,swiper}
}
</script>

<style scoped>
	.fr{
		float: right;
	}
	.clear:after{
		display: block;
		content: '';
		clear: both;
	}
	.Home{
		background: rgb(235,234,228);
		margin-bottom: 3.5rem;
	}
	/* 因为固定定位会盖住 */
	.home_swp{
		padding-top: 2.5rem;
	}
	.home_rush{
		background: #fff;
		padding: 0.8rem 5% 0.4rem 5%;
		margin: 1rem 0;
		width: 90%;
	}
	.home_great{
		background: #fff;
		width: 100%;
	}
	.home_great div{
		float: left;
	}
	.home_til{
		font-size: 1.1rem;
		color: rgb(106,180,57);
	}
	.home_txt{
		color: rgb(153,153,153);
		vertical-align: text-bottom;
		padding: 0.3rem 0;
		font-size: 0.7rem;
	}
	.rush_con{
		float: left;
		width: 48%;
		margin: 1%;
	}
	.rush_con img{
		margin-top: 0.2rem;
		width: 100%;
	}
	.home_great p{
		padding: 1.2rem 5% 0.5rem 5%;
	}
	.home_time{
		display: inline-block;
		font-size: 0.9rem;
		vertical-align: middle;
	}
	.home_time span{
		background: black;
		color: white;
		font-size: 0.9rem;
		padding: 0.1rem 0.15rem;
		border-radius: 0.3rem;
		
	}
	.home_cost{
		color: rgb(255,89,89);
		font-size: 1.2rem;
		vertical-align: top;
	}
	.great_rig{
		width: 40%;
	}
	.great_rig img{
		width: 100%;
	}
	.great_left{
		width: 60%;
	}
	.great_left div{
		float: left;
	}
	.great_left div:nth-of-type(2){
		width: 50%;
	}
	.great_left div:nth-of-type(3){
		width: 50%;
	}
	.great_left div img{
		width: 100%;
	}
	
</style>